<template>
	<view class="content">
		<view class="title">基础表单</view>
		<lonjin-form 
			@submit="submit" 
			:formData="formData" 
			@updateValue="updateValue" 
			@uploadPicture="uploadPicture"
			:config="config"
			@uploadMedia="uploadMedia"
			>
		</lonjin-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
           images: '',
        },
       
				config: [
{
						label: '上报人',
						placeholder: '请输入',
						key: 'usetime',
						type: 'input',
						unit: '',
						inputType: 'digit',
					},
					{
						label: '备注',
						placeholder: ' 请输入内容',
						key: 'remake',
						type: 'textarea',
					},
					{
						label: '日期',
						placeholder: '开始时间',
						key: 'date',
						type: 'date',
						start: '2023-03-01',
						end: '2023-04-01',
						fields: 'day'
					},
					{
						label: '时间',
						placeholder: '结束时间',
						key: 'time',
						type: 'time',
					},
					{
						label: '图片上传',
						placeholder: '请上传图片',
						key: 'picture',
						type: 'pictureGroup',
						max: 3,
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			updateValue(val) {
				this.formData = val
			},

			// 提交数据
			submit(val) {
				console.log(val)
    //     console.log(this.formData.date + " " +this.formData.time + ":00");
				// console.log(this.formData)
			},
			
			// 图片/视频上传
			uploadMedia(e) {
				// 如果 在formData中没有定义该字段，则需要进行深拷贝
				const data = JSON.parse(JSON.stringify(this.formData))
				data[e.key] = e.tempFiles[0].tempFilePath
				this.formData = JSON.parse(JSON.stringify(data))
				
				/* 如果定义了formData: {images: ''}，则不需要进行深拷贝 
				this.formData[e.key] = e.tempFiles[0].tempFilePath
				*/
			},
			
			// 多图上传
			uploadPicture(e) {
				// 如果 在formData中没有定义该字段，则需要进行深拷贝
				const data = JSON.parse(JSON.stringify(this.formData))
				if(data[e.key] && data[e.key].length){
					data[e.key] = [...data[e.key], e.tempFiles[0].tempFilePath]
				}else{
					data[e.key] = [e.tempFiles[0].tempFilePath]
				}
				this.formData = JSON.parse(JSON.stringify(data))
        
				/* 如果定义了formData: {images: ''}，则不需要进行深拷贝 
				this.formData[e.key] = [...this.formData[e.key], ...e.tempFiles[0].tempFilePath]
				*/
			},
      
		},
    
	}
</script>

<style>
	.title{
		width: 100%;
		font-size: 30rpx;
		margin-bottom: 32rpx;
		font-weight: bold;
		padding: 32rpx 32rpx 0 32rpx;
	}
	.content {
		width: 100%;
	}
</style>
